App.require(["htmlTool"], function (htmlTool) {
    var app = App.getCurrent();
    app.defineComponent("str-aside-nav", {
        render: function (next) {
            this.computeData();
            this.fetchAll(["./index.html", "./ul.html", "./li.html"], function (textList) {
                this.data.liHTML = textList[2];
                this.data.ulHTML = textList[1].replace("{{liHTML}}", textList[2]);
                next(this.renderHTML(textList[0].replace("{{ulHTML}}", this.data.ulHTML)));
            })
        },
        getDomObj: function () {
            this.attachDom('.str-drawer-change-container', "container")
                .attachDom("[role='asidenav']", "content")
                .attachDom("header", "header")
                .attachEvent("content", "click", this.actionClickHandler, false);
        },
        actionClickHandler: function (ev) {
            var target = ev.target,
                value = target.dataset.action;
            if (target.classList.contains("str-drawer-title")) {
                this.dispatchCustomEvent("navtitleclick", {
                    event: ev,
                    component: this,
                    target,
                    target
                });
            } else {
                var li = Component.getNodeName(target, "LI");
                if (li) {
                    value = li.dataset.action;
                    this.dispatchCustomEvent("navclick", {
                        event: ev,
                        component: this,
                        value: value
                    });
                }
                else {
                    var footer = Component.getNodeName(target, "FOOTER"), i = Component.getNodeName(target, "I");
                    if (footer && i) {
                        this.dispatchCustomEvent("navfooterclick", {
                            event: ev,
                            component: this,
                            target: target
                        })
                    }
                }
            }
        },
        _getIndexByHref: function (groups, i, value) {
            var options = groups[i].options;
            for (var i = 0; i < options.length; i++) {
                if (options[i].value === value) return i;
            }
            return -1;
        },
        _getIndexByValue: function (value) {
            var groups = this.data.groups;
            for (var i = 0; i < groups.length; i++) {
                if (groups[i].value === value) return i;
            }
            return -1;
        },
        init: function () {
            var value = this.property.value,
                groups = this.data.groups;
            var index = -1,
                container = this.domList.container;
            for (var i = 0; i < groups.length; i++) {
                if (groups[i].value === value) {
                    break;
                } else {
                    index = this._getIndexByHref(groups, i, value);
                    if (index !== -1) break;
                }
            }
            if (i !== groups.length) {
                var stepContainer = container.children[i],
                    itemDom = stepContainer.querySelector("ul").children[index];
                stepContainer.classList.add("str-drawer-step-active");
                this.data.activeContainer = stepContainer;
                if (itemDom) {
                    itemDom.classList.add("str-drawer-item-active");
                    this.data.activeItem = itemDom;
                }
            }
        },
        removeOption: function (value) {
            var groups = this.data.groups,
                index = -1;
            for (var i = 0; i < groups.length; i++) {
                index = this._getIndexByHref(groups, i, value);
                if (index !== -1) break;
            }
            if (i === groups.length) return;
            var stepContainer = this.domList.container.children[i];
            var li = stepContainer.lastElementChild.children[index];
            this.outerHTML(li, "", function () {
                groups[i].options.splice(index, 1);
                if (typeof feeback === "function") feeback();
            })
        },
        insertOption: function (oldValue, value, content, icon, feeback) {
            var groups = this.data.groups,
                index = -1;
            for (var i = 0; i < groups.length; i++) {
                index = this._getIndexByHref(groups, i, oldValue);
                if (index !== -1) break;
            }
            if (i === groups.length) return;
            var stepContainer = this.domList.container.children[i];
            var li = stepContainer.lastElementChild.children[index];
            var stepObj = {
                value: value,
                content: content,
                icon: icon
            };
            this.insertAdjacentHTML(li, this.data.liHTML, "beforebegin", function () {
                groups[i].options.splice(index, 0, stepObj);
                if (typeof feeback === "function") feeback();
            }, { option: stepObj})
        },
        appendOption: function (fValue, value, content, icon, feeback) {
            var index = this._getIndexByValue(fValue),
                that = this;
            if (index === -1) return;
            var stepContainer = this.domList.container.children[index];
            var stepObj = {
                value: value,
                content: content,
                icon: icon
            };
            this.insertAdjacentHTML(stepContainer.lastElementChild, this.data.liHTML, "beforeend", function () {
                that.data.groups[index].options.push(stepObj);
                if (typeof feeback === "function") feeback();
            }, { option: stepObj})
        },
        removeGroup: function (value, feeback) {
            var index = this._getIndexByValue(value);
            if (index !== -1) {
                var stepContainer = this.domList.container.children[index];
                var that = this;
                this.outerHTML(stepContainer, "", function () {
                    that.data.groups.splice(index, 1);
                    if (typeof feeback === "function") feeback();
                })
            }
        },
        insertGroup: function (oldValue, value, label, options, feeback) {
            var index = this._getIndexByValue(oldValue);
            if (index === -1) return this.appendGroup(value, label, options, feeback);
            var container = this.domList.container,
                that = this;
            var optGroup = {
                value: value,
                label: label,
                options: options
            };

            this.insertAdjacentHTML(container.children[index], this.data.ulHTML, "beforebegin", function () {
                that.data.groups.splice(index, 0, optGroup);
                if (typeof feeback === "function") feeback();
            }, { item: optGroup })
        },
        appendGroup: function (value, label, options, feeback) {
            var container = this.domList.container,
                that = this;
            var optGroup = {
                value: value,
                label: label,
                options: options
            };

            this.insertAdjacentHTML(container, this.data.ulHTML, "beforeend", function () {
                that.data.groups.push(optGroup);
                if (typeof feeback === "function") feeback();
            }, { item: optGroup });
        },
        computeData: function () {
            var property = this.property;
            this.data.groups = htmlTool.getOptGroups(this.slot);
            property.title = property.title || "";
            property.subtitle = property.subtitle || "";
            property.value = property.value || "";
            property.class = property.class || "";
            this.data.propertystr = this.createPropertyStr({
                class: property.class
            });
        },
        get bottomicon() {
            return this.property.bottomicon;
        },
        set bottomicon(value) {
            this.property.bottomicon = value;
            var bottomicon = this.getComponentById("bottomicon");
            if (bottomicon) bottomicon.icon = value;
        },
        set className(value) {
            if (this.property.class == value) return;
            this.domList.container.className = value;
            this.property.class = value;
        },
        get className() {
            return this.property.class;
        },
        set subtitle(value) {
            if (value === this.property.subtitle) return;
            var header = this.domList.header;
            if (this.property.subtitle) {
                if (value) {
                    var titleDom = header.querySelector(".drawer-sub-title");
                    titleDom.textContent = value;
                } else {
                    titleDom.parentNode.removeChild(titleDom);
                }
            } else {
                var titleDom = header.querySelector(".drawer-header-title");
                titleDom.insertAdjacentHTML("afterend", '<div class="drawer-sub-title">' + value + '</div>')
            }
            this.property.subtitle = value;
        },
        get subtitle() {
            return this.property.subtitle;
        },
        get title() {
            return this.property.title;
        },
        set title(value) {
            if (value === this.property.title) return;
            var titleDom = this.domList.header.querySelector(".drawer-header-title");
            if (titleDom) titleDom.textContent = value;
            this.property.title = value;
        },
        get value() {
            return this.property.value;
        },
        set value(val) {
            if (val === this.property.value) return;
            var groups = this.data.groups,
                index = -1;
            for (var i = 0; i < groups.length; i++) {
                if (groups[i].value === val) {
                    break;
                } else {
                    index = this._getIndexByHref(groups, i, val);
                    if (index !== -1) break;
                }
            }
            if (i !== groups.length) {
                var container = this.domList.container,
                    stepContainer = container.children[i],
                    itemDom = stepContainer.querySelector("ul").children[index];

                if (this.data.activeContainer) {
                    this.data.activeContainer.classList.remove("str-drawer-step-active");
                }
                if (this.data.activeItem) {
                    this.data.activeItem.classList.remove("str-drawer-item-active");
                }
                stepContainer.classList.add("str-drawer-step-active");
                if (itemDom) itemDom.classList.add("str-drawer-item-active");
                this.data.activeContainer = stepContainer;
                this.data.activeItem = itemDom;
                this.property.value = val;
            }
        }
    });
});